import React, { Component, useState } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { Checkbox } from 'antd';
import './map.less'
import Pole from "../../../latAndLng/pole.js";
import Camera from "../../../latAndLng/camera.js";
import options from '../../../config/dituconfig.js'
import Line from '../../../latAndLng/line.js'
import Sensor from '../../../latAndLng/sensor.js'
import { QMap, HeatMap, Marker, MarkerList, Info, TMap, Polyline, MultiPolyline } from 'react-tmap'
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['light', 'camera', 'sensor', 'pole'];


export default class map extends Component {

  constructor(a) {
    super(a);
    this.state = {
      alldate: false,
      polepanduan: true,
      camerapanduan: false,
      lightpanduan: false,
      sensorpanduan: false,
      poledata: Pole,
      cameradata: [],
      lightdata: [],
      sensordata: [],
      keyvalue: ['pole']

    }
  }
  componentWillUnmount() {


  }
  componentDidMount() {

    const script = document.createElement('script');
    script.src = "https://map.qq.com/api/gljs?v=1.exp&key=T6SBZ-MEV6W-GYRRK-YLB4N-GHWY5-5OFXU";
    script.charset = "utf-8";
    script.onload = () => {
      if (window.TMap) {
        this.initMap();
      }
    };
    document.body.appendChild(script);

  }
  onAllChange = () => {
    const allbox = document.getElementById('myCheckbox');
    const allboxvalue = allbox.checked;
    if (allboxvalue === true) {
      // meshLog('123',);
      this.setState({
        keyvalue: plainOptions,
        pole: true,
        camera: true,
        light: true,
        sensor: true,
        poledata: Pole,
        cameradata: Camera,
        lightdata: Line,
        sensordata: Sensor,
      });
    } else {
      this.setState({
        keyvalue: [],
        pole: false,
        camera: false,
        light: false,
        sensor: false,
        poledata: [],
        cameradata: [],
        lightdata: [],
        sensordata: [],
      });
    }
    meshLog('isChecked', allboxvalue);
    const script = document.createElement('script');
    script.src = "https://map.qq.com/api/gljs?v=1.exp&key=T6SBZ-MEV6W-GYRRK-YLB4N-GHWY5-5OFXU";
    script.charset = "utf-8";
    script.onload = () => {
      if (window.TMap) {
        this.initMap();
      }
    };
    document.body.appendChild(script);
  };
  onChange1 = (value) => {
    console.log('valuevalue:', value);
    this.setState({
      polepanduan: value.includes('pole'),
      camerapanduan: value.includes('camera'),
      lightpanduan: value.includes('light'),
      sensorpanduan: value.includes('sensor'),
      poledata: value.includes('pole') ? Pole : [],
      cameradata: value.includes('camera') ? Camera : [],
      lightdata: value.includes('light') ? Line : [],
      sensordata: value.includes('sensor') ? Sensor : [],
      keyvalue: value
    });

    const script = document.createElement('script');
    script.src = "https://map.qq.com/api/gljs?v=1.exp&key=T6SBZ-MEV6W-GYRRK-YLB4N-GHWY5-5OFXU";
    script.charset = "utf-8";
    script.onload = () => {
      if (window.TMap) {
        this.initMap();
      }
    };
    document.body.appendChild(script);

  };

  handleMarkerClick5 = (map) => {
    //const { lng, lat } = event.currentTarget;
    meshLog('跑步杆', map);

  };

  initMap = () => {
    const map = new window.TMap.Map('mapContainer', {
      center: new window.TMap.LatLng(31.31123852259022, 120.69704733065794),
      zoom: 14,
      showControl: false,
      doubleClickZoom: false
    });

    let markerPole = this.state.poledata

    var markerCamera = this.state.cameradata
    var markerSensor = this.state.sensordata

    var polylineArr = this.state.lightdata

    const polylineLayer = new window.TMap.MultiPolyline({
      id: 'polyline-layer',
      map: map,
      styles: {
        'style_blue': new window.TMap.PolylineStyle({
          'color': '#3777FF',
          'width': 6,
          'borderWidth': 5,
          'borderColor': '#FFF',
          'lineCap': 'butt'
        }),
        'style_red': new window.TMap.PolylineStyle({
          'color': '#CC0000',
          'width': 6,
          'borderWidth': 5,
          'borderColor': '#CCC',
          'lineCap': 'round'
        })
      },
      geometries: polylineArr
    });

    //初始化marker
    var marker = new window.TMap.MultiMarker({
      id: 'marker-layer1',
      map: map,
      zIndex: 2,
      styles: {
        "marker": new window.TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 32 },
          "src": 'https://swa.hglighting.net/message/marker0.png',
          "offset": { x: 0, y: -3 },


        }),
      },
      geometries: markerPole
    });
    var marker1 = new window.TMap.MultiMarker({
      id: 'marker-layer2',
      map: map,
      zIndex: 1,
      styles: {
        "markerCamera": new window.TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 32 },
          "zIndex": 1,
          "src": 'https://swa.hglighting.net/message/marker1.png',
          "offset": { x: 0, y: -3 },
        })
      },
      geometries: markerCamera
    });
    var marker2 = new window.TMap.MultiMarker({
      id: 'marker-layer3',
      map: map,
      zIndex: 1,
      styles: {
        "markerSensor": new window.TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 32 },
          "zIndex": 1,
          "src": 'https://swa.hglighting.net/message/marker2.png',
          "offset": { x: 0, y: -3 },
        })
      },
      geometries: markerSensor
    });
  };


  render() {
    // { meshLog('this', this.state.pole); }
    return (

      <div className="map" >
        <div className="mapdaohang">
          <span className='mapdaohangzuo' >位置： 智慧夜跑 》内置地图监控</span>
        </div>
        <div className="mapneirong">
          <div className="mapneirong1" id="areaheight">

            {/* <div className="lightdate" ></div> */}
            <div className="ditu" key={this.state.keyvalue} >

              <div id="mapContainer" style={{ height: 950 }}  ></div>

              {/* <QMap
                center={{ lng: 120.69704733065794, lat: 31.31123852259022 }}
                style={{ height: '950px' }}
                mapStyleId='style1'
                zoom={15}
                zIndex={0}
                events={{
                  // idle: map => this.handleMapIdle(map),
                  click: e => this.handleMarkerClick(e)
                }}
              >

                <MarkerList id="123"
                  showDecoration
                  data={Pole.slice(0, 34)}
                  //decoration="2"
                  events={{
                    click: map => this.handleMarkerClick4(map)
                  }}
                  style={{ display: this.state.pole === false ? 'none' : 'block' }}
                  visible={this.state.pole}
                  zIndex={2}
                />


                <MarkerList
                  showDecoration
                  data={camera.slice(0, 180)}
                  //animation="5"
                  //decoration="2"
                  events={{
                    click: map => this.handleMarkerClick5(map)
                  }}
                  icon='https://swa.hglighting.net/message/marker1.png'
                  visible={this.state.camera}
                  zIndex={1}
                />
              </QMap> */}
            </div>



          </div>
          <div className="biaoti" >
            <h1 style={{ color: "white", marginTop: 10 }}>功能菜单</h1>
            <Checkbox id="myCheckbox" onChange={() => { this.onAllChange() }}>全部</Checkbox>
            <CheckboxGroup value={this.state.keyvalue} style={{ display: "grid", color: "white", marginLeft: 28 }} options={options} onChange={(value) => { this.onChange1(value) }} ></CheckboxGroup>
          </div>
          <div className="mapneirong2">
            {/* <h2 style={{ marginTop: 40, marginLeft: -50 }} >总数量:7520个</h2> */}
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >灯具:8000个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >摄像头:180个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >传感器:826个</h2>
            <h2 style={{ marginTop: 40, marginLeft: -50 }} >跑步杆:33个</h2>
          </div>
        </div>
      </div >
    )
  }
}
